<template>
  <view>
    <Popup type="right" ref="chapterPoupRef">
      <view class="category-list">
        <view
          :class="['item', currentChapterId == 0 ? 'active' : '']"
          @click="load"
        >
          全部
        </view>
        <view
          v-for="item in chapterList"
          :class="[
            'item',
            item.chapterId == currentChapterId ? 'active' : '',
          ]"
          @click="selectChapter(item)"
        >
          {{ item.chapterName }}
        </view>
      </view>
    </Popup>
  </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, computed, defineProps } from "vue";
const {proxy} = getCurrentInstance()
const chapterPoupRef = ref();
const currentChapterId = ref(0);
const categoryId = ref();
const chapterList = ref([])
const props = defineProps({
	loadChapter: {
		type: Function
	},
	loadQuestion: {
		type: Function
	}
})
const load = () => {
	props.loadChapter(categoryId.value)
	chapterPoupRef.value.close();
}
const show = async (id) => {
  chapterPoupRef.value.show();
  let result = await proxy.Request({
  	url: proxy.Api.loadChapter,
	params: {
		id
	},
  	showLoading: false,
  });
  if (!result) {
  	return;
  }
  chapterList.value = result.data;
  categoryId.value = id
};

const selectChapter = (item) => {
  currentChapterId.value = item.chapterId;
  props.loadQuestion(item.chapterId)
  chapterPoupRef.value.close();
};

defineExpose({
  show,
});
</script>

<style lang="scss" scoped>
.category-list {
  .item {
    padding: 10px;
    font-size: 16px;
  }
  .active {
    color: #1a72f4;
  }
}
</style>
